
<style>
	.recordIndex{
		width: 100%;
		height: 100%;
	}
	li{
		background:#fff;
		display:flex;
		flex-direction:column;
		background:#fff;
		padding:10px;
		box-sizing:border-box;

	}
	
	.notMore{
		width: 100%;
		height: 300px;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 14px;
		justify-content: center;
	}
	.notData{
	    width: 100%;
	    height: 30px;
	    line-height: 30px;
	    text-align: center;
        color: #999;
    	font-size: 14px;
	}
	.new-btn{
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #fff;
		position: fixed;
		bottom: 0px;
		left: 0;
		right: 0;
		background: #FF0000;
		font-size: 14px;
	}
	
	.memo-li{
		width:100%;
		height:15px;
		display:flex;
		line-height:15px;
	}
	.memo-li>span{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		min-width:250px;
		max-width:250px;
		display: inline-block;
	}
	.txt{
		font-size: 14px;
	}
	.memo{
		width:100%;
		height:15px;
		display:flex;
		box-sizing: border-box;
		line-height:15px;
	}
	.memo>span:first-child{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		min-width:85px;
		max-width:85px;
		font-size: 14px;
	}
	.memo>span:last-child{
		text-align:right;
		display:block;
		flex:1;
		font-size: 14px;
	}
	.li-tit{
		width: 100%;
		height: 22px;
		display: flex;
		line-height: 22px;
	}
	.li-tit_left,.li-tit_right{
		flex: 1;
		display: flex;
		color: #999;
		font-size: 14px;
	}
	.li-tit_right{
		align-items: flex-end;
		justify-content: flex-end;
	}
	.li-product{
		width:100%;
		display:flex;
		align-items:center;
		background:#f7f7f7;
	}
	.li-product_img{
		width: 50px;
		height: 50px;
		margin: 10px;
		display: block;
	}
	.li-product_dei{
		display:flex;
		flex:1;
		font-size:14px;
		margin-left:10px;
	}
	.li-count{
		width:100%;
		height:30px;
		display:flex;
		line-height:30px;
		font-size:14px;
		justify-content:flex-end;
		align-content:flex-end;
		border-bottom:1px solid #e5e5e5;

	}
	.text-red{
		color: #FF0000;
	}
	.notData{
	    width: 100%;
	    height: 30px;
	    line-height: 30px;
	    text-align: center;
        color: #999;
    	font-size: 14px;
	}
</style>

<template>
	<div class="accessory-list-wrap">
        <div class="accessory-list">
            <ul v-if="orderList && orderList.length>0">
        		<li 
        			class="record-box" 
        			v-for="item in orderList"
        			@click="goDetail(item)"
        			>
            		<div class="li-tit">
				        <div  class="li-tit_left" v-if="item.orderStatus === 'ORDER_WAIT_PAY'" style='color:rgb(246, 175, 42)'>待付款</div>
				        <div class="li-tit_left" v-if="item.orderStatus === 'ORDER_WAIT_SENDGOODS'" style='color:#3f9ded'>待发货</div>
				        <div class="li-tit_left" v-if="item.orderStatus === 'ORDER_CANCEL_PAY'" style='color:#999'>已关闭</div>
				        <div class="li-tit_left"  v-if="item.orderStatus === 'ORDER_WAIT_RECVGOODS'" style='color:#28b8a6'>待收货</div>
				        <div class="li-tit_left" v-if="item.orderStatus === 'ORDER_WAIT_REVIEW'">待评论</div>
				        <div  class="li-tit_left" v-if="item.orderStatus === 'ORDER_END_GOODS'" style='color:#12b72b'>已完成</div>
            			<div class="li-tit_right">{{item.createTime}}</div>
            		</div>
            		<div class="li-product">
            			<img class="li-product_img" :src="item.detailList[0].goodsIcon"/>
            			<div class="li-product_dei">
            				{{item.detailList[0].goodsName}}
            				<span 
            					v-if="item.detailList[0].goodsModelNumber!=''||item.detailList[0].goodsModelNumber">
            					({{item.detailList[0].goodsModelNumber}})
            				</span>
            			</div>
            		</div>
            		<div class="li-count">
            			共<span>{{item.detailList.length}}</span>款商品 合计：
            			<span class="text-red">￥{{item.payTotal}}{{notMore}}</span>
            		</div>
            	</li>
            	 
            </ul>
            <div class="notData" v-if="notData">我是有底线的</div>
            <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"></div>
        </div>
    </div>
</template>

<script>
	import {Toast, MessageBox } from "mint-ui";
	export default {
		data() {
			return{
				notMore: false, // 是否有更多
			    orderList:[], //
			    page:0, 
			    busy: false,
			    rantrecordType:'',
			    status: 1,
			    notData: false,
			}
		},
		mounted(){
			this.getOrderList()
		},
		methods: {
			goDetail(item) {
				this.$router.push({
					name: "orderdetail",
					query: {
						orderid: item.orderId
					}
				});
			},
			deleteRecord(item, index) {
				let _this = this;
				
				 MessageBox.confirm('确定删除养护数据?').then(action => {
				 	console.log(action)
				 	if(action) {
				 		let url = this.$baseUrl.bizUrl + '/maintenance/record/front/delete'
			            let data = {
			                recordId: item.id
			            }
			            let callBack = (res) =>  {
			            	console.log(res)
			            	if(res.status == 200) {
			            		Toast({
						            message: "删除成功",
						        })
			            		_this.removeByValue(_this.recordList, _this.recordList[index])
			            	}else{
			            		Toast({
						            message: "删除失败",
						        })
			            	}
			            }
			            _this.$reqFormPost(url, data, callBack);
				 	}
				 })
			},
			removeByValue(arr, val) {
				for (var i = 0; i < arr.length; i++) {
			      if (arr[i] == val) {
			        	arr.splice(i, 1)
			        break;
			      }
			    }
			},
			getOrderList(flag = false) {
				
				let self = this;
				let url = this.$baseUrl.bizUrl + "/order/queryorder";
				
				let data = {
					token: this.$store.getters.getLoginStatus.token,
					userId: this.$store.getters.getLoginStatus.userId,
					page: this.page,
					pageSize: 10
				};
				let callBack = res => {
					console.log(res)
					if(res.status == 200){
						
						if(flag) {
							if(res.data.data.goodsList.length > 0) {
								this.orderList = this.orderList.concat(res.data.data.goodsList)
								this.busy = false
								
							}else{
								this.notMore = false
								this.busy = true
								this.notData = true
								
							}
						}else{
							
							if(res.data.data.page.pageCount > 1) {

								this.notMore = true
							}else{
								this.notMore = false
								this.busy = true
							}
							this.orderList = res.data.data.goodsList ? res.data.data.goodsList :[]
						}
					}
				};
				this.$reqFormPost(url, data, callBack)
			},
			loadMore: function () {
				if(this.notMore){
					this.busy = true;
	                // 多次加载数据
	                console.log(222)
	                setTimeout(() => {
	                   this.page ++;
	                   this.getOrderList(true);
	                }, 1000);
				}
			}
		},
		
	}
</script>
